<script lang="ts" setup>
import { ref } from 'vue'
import { useUserStore } from '@/store/userStore'
import { useUser } from '@/store/user'

const activeIndex = ref('1')

// 使用 Pinia 的用户信息
const userStore = useUserStore();
const userS = useUser();
console.log(userS.user_info)
console.log(userStore);

const handleSelect = (key: string, keyPath: string[]) => {
    console.log(key, keyPath);
}
import { ElMessage } from 'element-plus'
const logout = () => {
    userStore.logout();
    ElMessage({
        showClose: true,
        message: '已退出登录',
        type: 'success',
    })
}
</script>

<template>
    <div id="header">
        <!-- 容器使用flex布局，让菜单始终水平居中 -->
        <div class="nav_menu">
            <div class="logo-container">
                <router-link to="/home" style="display: flex; align-items: center;">
                    <img
                        src="../../assets/logo2.png" alt="Logo"
                        style="max-height: 100px; width: auto;">
                    
                </router-link>
            </div>
            <div class="menu_container">
                <el-menu :default-active="activeIndex" class="el-menu-demo_nav" :ellipsis="false" mode="horizontal"
                    @select="handleSelect" background-color="#ffffff" text-color="#000000" active-text-color="#E0E0E0"
                    router>
                    <div style="width:350px;"></div>
                    <el-menu-item index="/home">
                        主页
                    </el-menu-item>
                    <el-menu-item index="/addWeb">
                        添加钓鱼网站
                    </el-menu-item>
                    <el-menu-item index="/Vla">
                        验证网站
                    </el-menu-item>
                    <el-menu-item index="/aboutUs">
                        模型优化
                    </el-menu-item>
                    <el-menu-item index="/myAccount">
                        我的账户
                    </el-menu-item>
                    
                    <div style="width:40px"></div>
                    <el-sub-menu popper-class="custom-submenu" index="1">
                        <template #title>
                            <img v-if="userS.user_info.img" :src="userS.user_info.img"
                                style="width: min(60px, 100%);height: min(60px, 100%);clip-path:circle(30px at center)" />
                            <span v-else class="words">未登录</span>
                            <div style="width: 7px;"></div>
                            <span v-if="userS.user_info.uname">{{ userS.user_info.uname }}</span>
                        </template>
                        <!-- 未登录时只显示登录按钮 -->
                        <el-menu-item v-if="!userS.user_info.uname" index="/login">登录</el-menu-item>
                        <!-- 登录后显示账户信息和退出登录按钮 -->
                        <el-menu-item v-if="userS.user_info.uname" index="/myAccount">账户信息</el-menu-item>
                        <el-menu-item v-if="userS.user_info.uname" @click="logout">退出登录</el-menu-item>
                    </el-sub-menu>
                </el-menu>
            </div>
        </div>
    </div>
    <!-- <br> -->
</template>
<style scoped>
#header {
    background: #ffffff no-repeat center top;
    height: 100%;
    display: flex;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 阴影效果 */
    flex-direction: column;
}

.nav_menu {
    display: flex;
    justify-content: center;
    background-color: #ffffff;
    height: 90px;
    /* 导航栏高度 */
    align-items: center;
}

.logo-container {
    position: absolute;
    left: 20px;
    z-index: 1000;
}

.el-menu--horizontal {
    --el-menu-horizontal-height: 90px;
}
.el-menu-demo_nav {
    border-bottom: none;
    box-shadow: none;
}

#header, .nav_menu {
    background-color: #ffffff;
    margin: 0;
    padding: 0;
}
.el-menu-demo_nav .el-menu-item {
    width: 110px;
    text-align: center;
    font-size: 17px;
    font-family: Noto Sans;
}
.words {
    font-size: 17px;
    font-family: Noto Sans;
}

.words:hover {
    font-weight: bold;
}
.el-menu-demo_nav .el-menu-item:hover {
    font-weight: bold;
}

.custom-submenu {
    background-color: #ffffff;
    /* 自定义背景颜色 */
    width: 50%;
}

.custom-submenu .el-menu-item {
    color: #141414;
    /* 自定义菜单项文字颜色 */
    text-align: center;
}
.words{
    font-size: 17px;
    font-family: Noto Sans;
}
.words:hover{
    font-weight:bold;
}
.iconstyle:hover{
    font-weight:bold;
}
</style>